<template>
    <div id="app">
        <div id="nav">
            <router-link to="/">Home</router-link> |
            <router-link :to="{name:'about',query:{color: 'Red'}}">About</router-link> |
            <router-link to="/now">Now</router-link> |
            <el-button type="primary" round :router="true" @click="about" size="mini">Other</el-button>
        </div>
        <Banner :img_list="img_list"></Banner>
        <router-view :key="$route.fullPath" />
    </div>
</template>

<script>
    import Banner from './components/banner.vue';
    export default {
        name: 'app',
        data() {
            return {
                img_list: [{
                        id: 0,
                        src: require("./assets/wall(1).jpg")
                    }, {
                        id: 1,
                        src: require("./assets/wall(2).jpg")
                    },
                    {
                        id: 2,
                        src: require("./assets/wall(3).jpg")
                    },
                    {
                        id: 3,
                        src: require("./assets/wall(4).jpg")
                    },
                    {
                        id: 4,
                        src: require("./assets/wall(5).jpg")
                    },
                    {
                        id: 5,
                        src: require("./assets/wall(6).jpg")
                    },
                    {
                        id: 6,
                        src: require("./assets/wall(7).jpg")
                    }
                ]
            }
        },
        components: {
            Banner,
        },
        methods: {
            about: function () {
                this.$router.push({
                    name: 'about',
                    query: {
                        color: 'Green'
                    }
                });
            }
        },
        mounted(){
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    #nav {
        padding: 30px;
    }

    #nav a {
        font-weight: bold;
        color: #2c3e50;
    }

    #nav a.router-link-exact-active {
        color: #42b983;
    }

    .logo {
        width: 200px;
        height: auto;
    }
</style>